<template>
	<view class="tuomingguanli">
		<headertop title="脱敏管理" str="orderlist" str1="oridei" :back1="back1"></headertop>
		<view class="tuomingguanliback">

		</view>
		<view class="" :style="{'margin-top':statusBarHeight+'px','width':'100%','height':barHeight+'px'}">
		</view>

		<view class="tabbox">
			<view :class="active==1?'tabbox1':'tabbox1 cc'" @click="qiehuan(0)">
				脱敏计划
				<view class="acticvebox" v-if="active==0">

				</view>
			</view>
			<view :class="active==0?'tabbox1':'tabbox1 cc'" @click="qiehuan(1)">
				{{haveObserveobj.plan_schedule_id==0?'诊中留观':'诊后注意'}}
				<view class="acticvebox" v-if="active==1">
				</view>
			</view>
		</view>
		<view class="tuominjihua">
			<view class="tuominformbox" v-if="active==0&&!recordList">
				<view class="center">
					<view class="line">
						<span>用户姓名：</span>
						<input type="text" v-model="userobj['user_name']" :disabled="true" placeholder="请输入用户姓名" />
					</view>
					<view class="line" @click="open('药品')">
						<span>脱敏药品：</span>
						<view class="right">
							<input type="text" :disabled="true" placeholder="请选择药品"
								v-if="!numtext('medicine_id',formDate.medicine_id)" />
							<span v-else>{{numtext('medicine_id',formDate.medicine_id)}}</span>
							<image :src="_static('/images/Frame@2x(6).png')" class="arrow" mode="">
							</image>
						</view>
					</view>
					<view class="line" style="border: none;" @click="open('初次注射日期')">
						<span>初次注射日期：</span>
						<view class="right">
							<image :src="_static('/images/riliicon.png')" class="riliicon" mode="">
							</image>
							<span>{{formDate['start_date']?formDate['start_date']:'请选择时间'}}</span>
						</view>
					</view>
				</view>
			</view>
			<view class="tuominformbox" v-if="active==0&&recordList">
				<view class="center">
					<view class="line">
						<span>脱敏方式：</span>
						<span>{{recordList.dst_method}}</span>
					</view>
					<view class="line">
						<span>脱敏药品：</span>
						<span>{{recordList.dst_medicine}}</span>
					</view>

					<view class="line">
						<span>预计下次注射日期：</span>
						<span>{{recordList.next_time}}</span>
					</view>
					<view class="line" style="border: none;">
						<span>预计结束治疗日期：</span>
						<span>{{recordList.end_date}}</span>
					</view>
				</view>

			</view>
			<view class="tuijianbox" v-show="recordList&&active==0">
				<view class="tuijian">
					<view class="headerbox">
						<view class="leftbox">
							<image :src="_static('/images/Group 11682@2x.png')" class="xbq" mode="">
							</image>
							<span>推荐治疗计划</span>
						</view>
						<view class="tighrt">
							根据就诊信息变化
						</view>
					</view>
					<view class="shilibox">
						<view class="itemnd">
							<view class="fk">

							</view>
							<span>1号瓶</span>
						</view>
						<view class="itemnd">
							<view class="fk" style="background:#7FD2F9">

							</view>
							<span>2号瓶</span>
						</view>
						<view class="itemnd">
							<view class="fk" style="background:#2AB4F5">

							</view>
							<span>3号瓶</span>
						</view>
						<template v-if="recordList">
							<view class="itemnd" v-if="recordList['dst_medicine_id']==1">
								<view class="fk" style="background:#0285FF">

								</view>
								<span>4号瓶</span>
							</view>
						</template>
					</view>
					<l-echart ref="chartRef"></l-echart>
				</view>
			</view>
			<view class="bz" v-if="active==0&&!recordList">
				<image :src="_static('/images/gth1.png')" class="fuhao" mode=""></image>
				<span>请如实填写，填写错误将影响治疗方案</span>
			</view>
		</view>

		<view class="fixedbox" v-if="active==0">
			<view class="btnss1">
				<view class="savebtn" @click="saveMedicine()">
					{{recordList?'更换药品':'保存'}}
				</view>
			</view>
		</view>
		<view v-if="active==1">
			<view class="moudelff" v-if="haveObserveobj.plan_schedule_id==0">
				<view class="cc">
					<view class="line">
						<view class="text">
							注射记录：
						</view>
						<view class="right" @click="gopage()">
							<span>历史注射记录</span>
							<image :src="_static('/images/Frjt.png')" class="rightarrow" mode="">
							</image>
						</view>
					</view>
					<view class="line" @click="open('注射日期')">
						<view style="display: flex;align-items: center;">
							<span style="color: #F53F3F;">*</span>
							<view class="text">
								注射日期：
							</view>
						</view>
						<view class="right">
							<input type="text" v-model="formDate1['injection_date']" :disabled="true"
								placeholder="请输入注射日期" class="rightinput" v-if="!formDate1['injection_date']" />
							<span v-else>{{formDate1['injection_date']}}</span>
							<image :src="_static('/images/Frjt.png')" class="rightarrow" mode="">
							</image>
						</view>
					</view>
					<view class="line">
						<view class="text">
							PEF前（L/min）：
						</view>
						<input type="digit" v-model="formDate1['pef']" placeholder="请输入PEF前数值" class="rightinput" />
					</view>
					<view class="line">
						<view class="text">
							FEV1：
						</view>
						<input type="digit" v-model="formDate1['fev1']" placeholder="请输入FEV1数值" class="rightinput" />
					</view>
					<view class="line" @click="open('注射瓶号')">
						<view style="display: flex;align-items: center;">
							<span style="color: #F53F3F;">*</span>
							<view class="text">
								注射瓶号：
							</view>
						</view>
						<view class="right">
							<input type="text" v-model="formDate1['bottle_number']" placeholder="请选择瓶号"
								class="rightinput" v-if="!formDate1['bottle_number']" :disabled="true" />
							<span v-else>{{formDate1['bottle_number']}}</span>
							<image :src="_static('/images/Frjt.png')" class="rightarrow" mode="">
							</image>
						</view>
					</view>
					<view class="line" @click="open('剂量')">
						<view style="display: flex;align-items: center;">
							<span style="color: #F53F3F;">*</span>
							<view class="text">
								剂量：
							</view>
						</view>
						<view class="right">
							<input type="text" v-model="formDate1['dose']" :disabled="true" v-if="!formDate1['dose']"
								placeholder="请选择剂量" class="rightinput" />
							<span v-else>{{formDate1['dose']}}</span>
							<image :src="_static('/images/Frjt.png')" class="rightarrow" mode="">
							</image>
						</view>
					</view>
				</view>
			</view>
			<view class="moudelff" v-if="haveObserveobj.plan_schedule_id!=0">
				<view class="cc">
					<view class="line">
						<view class="text">
							结束倒计时：
						</view>
						<view class="rightbtn">
							<up-count-down :time="haveObserveobj.remaining_time*1000" @finish="finish"
								format="mm:ss"></up-count-down>
						</view>
					</view>
					<view class="line1">
						<view class="text">
							PEF后 (L/min) ：
						</view>
						<input type="digit" v-model="formDate2['pef_last']" placeholder="请输入PEF后数值"
							class="rightinput" />
					</view>
					<view class="line2">
						<view class="t1">
							留观症状反应：
						</view>
						<view class="xuanxiangboxs">
							<view class="xuanxa" v-for="(item,index) in zzarr" :key="item.id" @click="activez=index">
								<view class="xx" v-if="activez!=index">

								</view>
								<view class="xx1" v-else>
									<view class="cnter">

									</view>
								</view>
								<view class="text">
									{{item['title']}}
								</view>
							</view>
						</view>
					</view>
					<view class="fuzhendate">
						<view class="lable">
							复诊日期：
						</view>
						<view class="dateright">
							{{haveObserveobj['next_date']}}
						</view>
					</view>
				</view>
			</view>
			<view class="moudleff" v-if="haveObserveobj.plan_schedule_id==0">
				<view class="cc">
					<view class="" style="display: flex;align-items: center;">
						<view class="labletitle" @click="ttstr='before_note'" style="margin-right:64rpx;"
							:style="{'color':ttstr==='before_note'?'#2AB4F5':'#1D2129'}">
							<span>诊前注意</span>
							<view class="avtive" v-if="ttstr=='before_note'">

							</view>
						</view>
						<view class="labletitle" @click="ttstr='in_progress_note'"
							:style="{'color':ttstr==='in_progress_note'?'#2AB4F5':'#1D2129'}">
							<span>诊中注意</span>
							<view class="avtive" v-if="ttstr=='in_progress_note'">
							</view>
						</view>
					</view>
					<view class="inputbox">
						<view class="center">
							<view class="textarea" v-if="ttstr=='before_note'">
								<text>{{noteobj['before_note']}}</text>
							</view>
							<view class="textarea" v-else>
								<text>{{noteobj['in_progress_note']}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="moudleff" v-if="haveObserveobj.plan_schedule_id!=0">
				<view class="cc">
					<view class="labletitle">
						<span>诊后注意</span>
						<view class="avtive">

						</view>
					</view>
					<view class="inputbox">
						<view class="center">
							<view class="textarea">
								<text>{{noteobj['after_note']}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="fixedbox">
				<view class="btnss" v-if="haveObserveobj.plan_schedule_id!=0">
					<view class="btn1" @click="backsyb">
						上一步
					</view>
					<view class="btn2" @click="jiuzhen1">
						就诊完成
					</view>
				</view>
				<view class="btnss1" v-if="haveObserveobj.plan_schedule_id==0">
					<view class="savebtn" @click="startliouguan">
						开始留观
					</view>
				</view>
			</view>
		</view>
		<up-popup :show="show1" mode="bottom" :zoom="false">
			<view class="xuanxiang">
				<view class="tt" style="margin-left: 30rpx;color: #888;" @click="show1=false">
					取消
				</view>
				<view class="tt" style="font-weight: 600;">
					{{titlepopu}}
				</view>
				<view class="tt" style="margin-right: 30rpx;color: #0077BE;" @click="queding">
					确认
				</view>
			</view>
			<picker-view :indicator-style="indicatorStyle" immediate-change="true" :value="valuedate"
				@change="bindChange" class="picker-view" v-if="titlepopu=='请选择初次注射日期'">
				<picker-view-column>
					<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
				</picker-view-column>
			</picker-view>
			<picker-view :indicator-style="indicatorStyle" immediate-change="true" :value="valuedate1"
				@change="bindChange" class="picker-view" v-if="titlepopu=='请选择注射日期'">
				<picker-view-column>
					<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
				</picker-view-column>
			</picker-view>
			<picker-view :indicator-style="indicatorStyle" immediate-change="true" :value="value1" @change="bindChange"
				class="picker-view" v-if="titlepopu=='请选择药品'">
				<picker-view-column>
					<view class="item" v-for="(item,index) in arr" :key="index">{{item.name}}</view>
				</picker-view-column>
			</picker-view>
			<picker-view :indicator-style="indicatorStyle" immediate-change="true"
				:value="zhuanind1(medicinearr,formDate1.bottle_number)" @change="bindChange" class="picker-view"
				v-if="titlepopu=='请选择注射瓶号'">
				<picker-view-column>
					<view class="item" v-for="(item,index) in medicinearr" :key="index">{{item.number}}</view>
				</picker-view-column>
			</picker-view>
			<picker-view :indicator-style="indicatorStyle" immediate-change="true"
				:value="zhuanind(medicinearr[activeind]['dose_list'],formDate.dose)" @change="bindChange"
				class="picker-view" v-if="titlepopu=='请选择剂量'">
				<picker-view-column>
					<view class="item" v-for="(item,index) in medicinearr[activeind]['dose_list']" :key="index">{{item}}
					</view>
				</picker-view-column>
			</picker-view>
		</up-popup>
		<view class="popuopen">
			<up-popup :show="show" mode="center" :zoom="false">
				<view class="zhenduanbox" v-if="haveObserveobj.plan_schedule_id!=0">
					<image :src="_static('/images/removeicon.png')" class="closeicon" @click="show=false" mode="">
					</image>
					<view class="text">
						请确认就诊完成
					</view>
					<view class="btn" @click="jiuzhen()">
						确认
					</view>
				</view>
				<view class="popucenter" v-if="haveObserveobj.plan_schedule_id==0">
					<image :src="_static('/images/removeicon.png')" class="closeicon" mode="" @click="show=false">
					</image>
					<view class="title">
						请确认本次注射的瓶号剂量
					</view>
					<view class="cnter">
						<view class="line">
							<view class="lable">
								注射瓶号：
							</view>
							<input type="text" :disabled="true" v-model="formDate1['bottle_number']" />
						</view>
						<view class="line">
							<view class="lable">
								剂量：
							</view>
							<view style="display: flex;align-items: center;margin-right: 30rpx;">
								<input type="text" style="margin-right: 0rpx;" :disabled="true"
									v-model="formDate1['dose']" />ml
							</view>
						</view>
					</view>
					<view class="tishi">
						<view class="ctext">
							必须留院观察30分钟，期间出现不良反应请及时通知医院护士。
						</view>
					</view>
					<view class="btnss">
						<view class="btn" @click="show=false">
							重新编辑
						</view>
						<view class="btn1" @click="startliuguan()">
							开始留观
						</view>
					</view>
				</view>
			</up-popup>
			<up-popup :show="show2" mode="center" :zoom="false">
				<view class="popucenter">
					<view class="cebtertext">
						<view class="title1">
							特别提醒
						</view>
						由于个体差异，有极少一部分人可能会对疫苗或者其中的某种成分过敏，有一定的概率发生严重的接种异常反应，比如过敏性休克，在接种后数分钟内会出现呼吸系统和循环系统功能异常，表现为面色苍白、四肢湿冷、口唇发紫、血压下降、呼吸困难等过敏性休克的危重症状。
						<br />
						<view style="margin-top: 30rpx;">
							如果接种疫苗后没有留观30分钟擅自离开，在外面道路或者远离医院的地方发生过敏性休克，后果将不堪设想。但是在接种点留观时，备有医护人员和急救药品，一旦出现过敏性休克等紧急情况，医护人员可以在现场及时采取救治措施，才不会有生命危险，所以再次提醒您按要求留观30分钟以上，确需在30分钟内离开，为此产生的后果责任由本人负责，特此提醒！
						</view>
						<view class="btnss">
							<view class="btn" @click="show2=false">
								继续留观
							</view>
							<view class="btn1" @click="jiuzhen()">
								确认完成
							</view>
						</view>

					</view>
				</view>
			</up-popup>
		</view>
		<view style="width: 100%;height: 200rpx;">

		</view>
		<userlogin @updata="getuser1" ref="denglu"></userlogin>
	</view>
</template>
<script setup>
	import {
		setToken,
		getToken,
	} from '@/ulm/utils/auth';
	import userlogin from '@/components/getuser/getuser.vue'
	const echarts = require('../../uni_modules/lime-echart/static/echarts.min');
	import {
		onPageScroll,
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";

	import {
		ref,
		reactive,
		onMounted,
		nextTick
	} from 'vue'
	import headertop from '@/components/header.vue'
	import {
		_static
	} from '@/ulm/utils/url.js'
	import ulm, {
		$api
	} from '@/ulm';
	const step = ref(1)
	const show1 = ref(false)
	const date = new Date()
	const show2 = ref(false)
	const ttstr = ref('before_note')
	const years = []
	const year = date.getFullYear()
	const indicatorStyle = ref(`height: 50px;`)
	const months = []
	const month = date.getMonth() + 1
	const days = []
	const activez = ref(0)
	const activeind = ref(0)
	const flag = ref(false)
	const denglu = ref(null)
	const zzarr = ref([{
		id: 0,
		title: '无反应'
	}, {
		id: 1,
		title: '局部反应不良'
	}, {
		id: 2,
		title: '轻度、中度全身不良反应'
	}, {
		id: 3,
		title: '严重全身不良反应'
	}, {
		id: 4,
		title: '过敏性休克'
	}])
	const day = date.getDate()
	const valuedate = ref([9999, month - 1, day - 1])
	const valuedate1 = ref([9999, month - 1, day - 1])
	for (let i = 1900; i <= date.getFullYear(); i++) {
		years.push(i)
	}
	for (let i = 1; i <= 12; i++) {
		months.push(i)
	}
	for (let i = 1; i <= 31; i++) {
		days.push(i)
	}
	const statusBarHeight = ref('')
	const barHeight = ref('')
	const titlepopu = ref('')
	const active = ref(0)
	const val = ref(1)
	const val1 = ref('0.8ml')
	const show = ref(false)
	const dose = ref('')
	const chartRef = ref(null)
	const arr = ref([])
	const noteobj = ref([])
	const recordList = ref(null)
	const haveObserveobj = ref({})
	const formDate = reactive({
		medicine_id: '',
		start_date: ''
	})
	const injection_date = ref('')
	const formDate1 = reactive({
		injection_date: '',
		pef: '',
		fev1: '',
		bottle_number: '',
		dose: ''
	})
	const formDate2 = reactive({
		plan_schedule_id: '',
		pef_last: '',
		observe_symptoms: ''
	})
	const medicine_id = ref('')
	const bottle_number = ref('')
	const start_date = ref('')
	const userobj = ref({})
	const flagzhi = ref(true)
	const jiluarr = ref([])
	const medicinearr = ref([])
	const optiondate = {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			},
			confine: true
		},

		legend: {
			data: ['热度', '正面', '负面']
		},
		dataZoom: [ // 数据区域缩放
			{
				type: 'inside',
				start: 0,
				end: 100,
				zoomLock: true
			},
		],
		grid: {
			left: 0,
			right: 0,
			bottom: 15,
			top: 40,
			containLabel: true
		},
		xAxis: {
			axisLabel: {
				show: true, // 确保显示标签
				interval: 0, // 强制显示所有标签
				fontSize: 10, // 调整字体大小
			},
			axisTick: {
				alignWithLabel: true // 刻度与标签对齐
			},
			type: 'category',
			axisTick: {
				show: false
			},
			data: ['08/08', '08/18', '08/28', '09/08', '09/18', '09/28', '10/08']
		},
		yAxis: {
			type: 'value'
		},
		series: [{
			barWidth: 17,
			data: [{
				value: 0.2,
				itemStyle: {
					color: '#CAEEFF',
					borderRadius: [8, 8, 0, 0]
				},

			}],
			type: 'bar'
		}]
	}
	onShow(() => {
		show.value = false
		initlist()
		initlistyaop()
		getuser()
		inithaveObserve()
	})

	function padStart(n) {
		return n.toString().padStart(2, 0)
	}

	function finish() {
		console.log('结束---------------------');
		flagzhi.value = false
	}

	function formattedDate(timestamp) {
		const date = new Date(timestamp)
		const year = date.getFullYear()
		const month = padStart(date.getMonth() + 1)
		const day = padStart(date.getDate())
		return `${year}-${month}-${day}`
	}

	function backsyb() {
		haveObserveobj.value.plan_schedule_id = 0
		formDate1['injection_date'] = formattedDate(haveObserveobj.value.plan_schedule['injection_time'] * 1000)
		formDate1['pef'] = haveObserveobj.value.plan_schedule['pef']
		formDate1['fev1'] = haveObserveobj.value.plan_schedule['fev1']
		formDate1['bottle_number'] = haveObserveobj.value.plan_schedule['bottle_number']
		formDate1['dose'] = haveObserveobj.value.plan_schedule['dose']
	}
	async function initnote() {
		const res = await $api.note({
			medicine_id: recordList.value['dst_medicine_id']
		})
		if (res.code == 1) {
			noteobj.value = res.data
		}
	}

	function zhuanind(arr, ite) {
		var ind = arr.findIndex(item => item['id'] == ite)
		if (ind == -1) {
			ind = 0
		}
		return [ind]
	}

	function zhuanind1(arr, ite) {
		var ind = arr.findIndex(item => item['number'] == ite)
		if (ind == -1) {
			ind = 0
		}
		return [ind]
	}

	function qr1() {

	}

	function jiuzhen1() {
		formDate2.plan_schedule_id = haveObserveobj.value['plan_schedule_id']
		formDate2.observe_symptoms = zzarr.value[activez.value]['id']
		injection_date.value = ''
		dose.value = ''
		bottle_number.value = ''

		formDate1.injection_date = ''
		formDate1.pef = ''
		formDate1.bottle_number = ''
		formDate1.dose = ''
		formDate1.fev1 = ''
		if (flagzhi.value) {
			show2.value = true
		} else {
			show.value = true
		}
	}
	async function jiuzhen() {
		const res = await $api.complete(formDate2)
		if (res.code == 1) {
			inithaveObserve()
			show2.value = false
			formDate2.plan_schedule_id = ''
			formDate2.pef_last = ''
			formDate2.observe_symptoms = ''
		}
	}
	async function inithaveObserve() {
		show.value = false
		const res = await $api.haveObserve()
		if (res.code == 1) {
			haveObserveobj.value = res.data
		}
	}
	async function medicineBottleinit() {
		const res = await $api.medicineBottle({
			medicine_id: recordList.value.dst_medicine_id
		})
		if (res.code == 1) {
			medicinearr.value = res.data
		}
	}

	async function startliouguan() {
		for (var i in formDate1) {
			if (i != 'pef' && i != 'fev1')
				if (!formDate1[i]) {
					uni.showToast({
						title: '请补全信息后提交',
						icon: 'none'
					})
					return
				}
		}
		show.value = true

	}
	async function startliuguan() {
		const res = await $api.addSchedule(formDate1)
		if (res.code == 1) {
			show.value = false
			flagzhi.value = true
			inithaveObserve()
			injection_date.value = ''
			dose.value = ''
			bottle_number.value = ''
			formDate1.injection_date = ''
			formDate1.pef = ''
			formDate1.bottle_number = ''
			formDate1.dose = ''
			formDate1.fev1 = ''

		} else {
			uni.showToast({
				title: res.msg
			})
		}
	}
	async function getuser() {
		const res = await $api.userinfo()
		if (res.code == 1) {
			userobj.value = res.data
		}
	}
	async function getuser1() {
		const res = await $api.userinfo()
		if (res.code == 1) {
			userobj.value = res.data
			initlist()
			initlistyaop()
			inithaveObserve()
		}
	}
	async function initlistyaop() {
		const res = await $api.medicineList()
		if (res.code == 1) {
			arr.value = res.data

		}
	}

	function gopage() {
		uni.navigateTo({
			url: '/sub_index/index/lishizhusherecord'
		})
	}
	async function initlist() {
		const res = await $api.planSchedule()
		if (res.code == 1) {
			recordList.value = res.data
			medicineBottleinit()
			initnote()
			optiondate.xAxis.data = res.data.plan_schedule.map(item => item.date)
			var seriesdate = []
			for (var i in res.data.plan_schedule) {
				var obj = {
					value: res.data.plan_schedule[i]['dose'] * 1,
					itemStyle: {
						color: '#CAEEFF',
						borderRadius: [4, 4, 0, 0]
					},
					emphasis: {
						focus: 'series'
					},
				}
				if (res.data.plan_schedule[i]['bottle_number'] == 1) {
					obj.itemStyle.color = '#CAEEFF'
				} else if (res.data.plan_schedule[i]['bottle_number'] == 2) {
					obj.itemStyle.color = '#7FD2F9'
				} else if (res.data.plan_schedule[i]['bottle_number'] == 3) {
					obj.itemStyle.color = '#2AB4F5'
				} else if (res.data.plan_schedule[i]['bottle_number'] == 4) {
					obj.itemStyle.color = '#0285FF'
				}
				seriesdate.push(obj)
			}
			var targetIndex = optiondate.xAxis.data.findIndex(item => item.indexOf('01') != -1)
			// 计算滚动位置
			const totalItems = optiondate.xAxis.data.length;
			const visibleItems = 5; // 希望同时显示的项目数
			const startValue = Math.max(0, targetIndex - Math.floor(visibleItems / 2));
			const endValue = Math.min(totalItems - 1, targetIndex + Math.ceil(visibleItems / 2));
			// 转换为百分比
			const startPercent = (startValue / totalItems) * 100;
			const endPercent = (endValue / totalItems) * 100;

			optiondate.dataZoom[0].end = 10
			// optiondate.dataZoom[0].start = bfb
			optiondate.series[0].data = seriesdate
			setTimeout(async () => {
				if (!chartRef.value) return
				const myChart = await chartRef.value.init(echarts)
				myChart.setOption(optiondate)
			}, 500)
		} else {
			recordList.value = ''
		}
	}
	async function saveMedicine() {
		if (!getToken()) {
			denglu.value.DengLu()
			return
		}
		if (!userobj.value) {
			uni.showModal({
				title: '提示', // 标题（可选）
				content: '请先补全用户资料', // 内容（可选）
				confirmText: '确定', // 确认按钮文字（可选，默认“确定”）
				success: (res) => {
					if (res.confirm) {
						// 执行确定后的逻辑
						uni.navigateTo({
							url: '/sub_index/index/bianjigerenziliao'
						})
					}
				},
				fail: (err) => {
					console.error('弹窗调用失败', err);
				}
			});

			return
		}

		if (recordList.value) {
			formDate['medicine_id'] = ''
			formDate['start_date'] = ''
			medicine_id.value = ''
			start_date.value = ''
			recordList.value = null
			return
		}
		if (!formDate['medicine_id'] || !formDate['start_date']) {
			uni.showToast({
				title: '必须补全信息才能提交',
				icon: 'none'
			})
			return
		}
		const res = await $api.saveMedicine(formDate)
		if (res.code == 1) {
			initlist()
		}
	}
	const back1 = ref('')
	onMounted(() => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;


	})
	onPageScroll((e) => {

		if (e.scrollTop > 100) {
			back1.value = '#81D6FF'
		} else {
			back1.value = ''
		}

	})

	function numtext(typestr, id) {
		var ind = arr.value.findIndex(item => item.id == id)
		if (typestr == 'medicine_id') {
			if (ind == -1) {
				return ''
			} else {
				return arr.value[ind]['name']
			}
		}
	}

	function open(str) {
		if (!getToken()) {
			denglu.value.DengLu()
			return
		}
		if (!userobj.value) {
			uni.showModal({
				title: '提示', // 标题（可选）
				content: '请先补全用户资料', // 内容（可选）
				confirmText: '确定', // 确认按钮文字（可选，默认“确定”）
				success: (res) => {
					if (res.confirm) {
						// 执行确定后的逻辑
						uni.navigateTo({
							url: '/sub_index/index/bianjigerenziliao'
						})
					}
				},
				fail: (err) => {
					console.error('弹窗调用失败', err);
				}
			});

			return
		}

		if (str == '剂量' && !formDate1.bottle_number) {
			uni.showToast({
				title: '请先选择注射瓶号',
				icon: 'none'
			})
			return
		}
		titlepopu.value = '请选择' + str
		show1.value = true
	}

	function bindChange(e) {
		const val = e.detail.value
		if (titlepopu.value == '请选择初次注射日期') {
			start_date.value =
				`${years[val[0]]}-${months[val[1]]<10?'0'+months[val[1]]:months[val[1]]}-${days[val[2]]<10?'0'+days[val[2]]:days[val[2]]}`
		} else if (titlepopu.value == '请选择药品') {
			medicine_id.value = arr.value[val[0]]['id']
		} else if (titlepopu.value == '请选择注射瓶号') {
			bottle_number.value = medicinearr.value[val[0]]['number']
		} else if (titlepopu.value == '请选择剂量') {

			var ind = medicinearr.value.findIndex(item => item.number == formDate1.bottle_number)
			dose.value = medicinearr.value[ind]['dose_list'][val[0]]
		} else if (titlepopu.value == '请选择注射日期') {
			injection_date.value =
				`${years[val[0]]}-${months[val[1]]<10?'0'+months[val[1]]:months[val[1]]}-${days[val[2]]<10?'0'+days[val[2]]:days[val[2]]}`
		}
	}

	function queding() {
		if (titlepopu.value == '请选择初次注射日期') {
			if (!start_date.value) {
				formDate['start_date'] =
					`${date.getFullYear()}-${months[month-1]<10?'0'+months[month-1]:months[month-1]}-${day<10?'0'+day:day}`
			} else {
				formDate.start_date = start_date.value
				if (convertToTimestamp(formDate['start_date']) > Date.now()) {
					formDate['start_date'] = ''
					uni.showToast({
						title: '请选择正确注射时间',
						icon: 'none'
					})
					return
				}

			}
		} else if (titlepopu.value == '请选择药品') {
			if (!medicine_id.value) {
				formDate.medicine_id = arr.value[0]['id']
			} else {
				formDate.medicine_id = medicine_id.value
			}
		} else if (titlepopu.value == '请选择注射瓶号') {

			if (!bottle_number.value) {
				formDate1.bottle_number = medicinearr.value[0]['number']
			} else {
				if (bottle_number.value != formDate1.bottle_number) {
					formDate1.dose = ''
					dose.value = ''
				}
				formDate1.bottle_number = bottle_number.value
			}
			activeind.value = medicinearr.value.findIndex(item => item.number == formDate1.bottle_number)


		} else if (titlepopu.value == '请选择剂量') {
			if (!dose.value) {
				var ind = medicinearr.value.findIndex(item => item.number == formDate1.bottle_number)
				formDate1.dose = medicinearr.value[ind]['dose_list'][0]
			} else {
				formDate1.dose = dose.value
			}
		} else if (titlepopu.value == '请选择注射日期') {
			if (!injection_date.value) {
				formDate1.injection_date =
					`${date.getFullYear()}-${months[month-1]<10?'0'+months[month-1]:months[month-1]}-${day<10?'0'+day:day}`
			} else {
				formDate1.injection_date = injection_date.value
				if (convertToTimestamp(formDate1['injection_date']) > Date.now()) {
					formDate1['injection_date'] = ''
					uni.showToast({
						title: '请选择正确注射日期',
						icon: 'none'
					})
					return
				}
			}
		}
		show1.value = false
	}

	function convertToTimestamp(dateStr) {
		return new Date(dateStr).getTime();
	}

	async function injectionRecordinit() {
		const res = await $api.injectionRecord()
		if (res.code == 1) {
			jiluarr.value = res.data.data
		}
	}

	function qiehuan(num) {
		if (num == 1 && !recordList.value) {
			uni.showToast({
				title: '请先补全脱敏计划',
				icon: 'none'
			})
			return
		}
		if (num == 1) {
			inithaveObserve()
		}
		active.value = num
	}
</script>
<style lang="scss">
	input {
		font-size: 28rpx;
	}

	.rightarrow {
		width: 24rpx;
		height: 24rpx;
		margin-left: 12rpx;
	}

	.xuanxiang {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		overflow: hidden;
		justify-content: space-between;
		margin-bottom: 30rpx;

		.tt {
			font-size: 32rpx;
		}
	}

	.popuopen {
		::v-deep .u-popup__content {
			background-color: rgba(255, 0, 0, 0) !important;
		}
	}


	.picker-view {
		width: 100%;
		height: 600rpx;
		margin-top: 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}

	::v-deep .u-popup__content {
		border-radius: 20rpx 20rpx 0 0;
	}

	.zhenduanbox {
		width: 602rpx;
		height: 324rpx;
		background: linear-gradient(180deg, #CAEEFF 0%, #FFFFFF 23%);
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		overflow: hidden;
		position: relative;

		.closeicon {
			position: absolute;
			width: 35rpx;
			height: 35rpx;
			top: 26rpx;
			right: 26rpx;
		}

		.text {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #1D2129;
			margin-top: 98rpx;
			width: 100%;
			text-align: center;
		}

		.btn {
			width: 292rpx;
			height: 72rpx;
			background: #2AB4F5;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			text-align: center;
			line-height: 72rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			margin: auto;
			margin-top: 70rpx;
			margin-bottom: 48rpx;
		}
	}

	.popucenter {
		background: linear-gradient(180deg, #CAEEFF 0%, #FFFFFF 23%);
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		width: 686rpx;
		overflow: hidden;
		position: relative;

		.cebtertext {
			width: 80%;
			margin: 60rpx auto;
			font-size: 30rpx;

			.btnss {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 40rpx auto;

				.btn {
					width: 230rpx;
					height: 72rpx;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					border: 2rpx solid #86909C;
					text-align: center;
					line-height: 72rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #86909C;
				}

				.btn1 {
					width: 230rpx;
					height: 72rpx;
					background: #2AB4F5;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					text-align: center;
					line-height: 72rpx;
					color: #FFFFFF;
				}
			}

			.title1 {
				width: 100%;
				text-align: center;
				color: red;
				font-weight: bold;
				font-size: 36rpx;
				margin-bottom: 20rpx;
			}
		}

		.closeicon {
			position: absolute;
			width: 35rpx;
			height: 35rpx;
			top: 26rpx;
			right: 26rpx;
		}

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #1D2129;
			width: 100%;
			text-align: center;
			margin-top: 48rpx;
		}

		.btnss {
			width: 622rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 40rpx auto;

			.btn {
				width: 296rpx;
				height: 72rpx;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				border: 2rpx solid #86909C;
				text-align: center;
				line-height: 72rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #86909C;
			}

			.btn1 {
				width: 292rpx;
				height: 72rpx;
				background: #2AB4F5;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				text-align: center;
				line-height: 72rpx;
				color: #FFFFFF;
			}
		}

		.tishi {
			width: 622rpx;
			height: 116rpx;
			background: #F7F8FA;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: auto;

			.ctext {
				width: 580rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #4E5969;
			}
		}

		.cnter {
			width: 622rpx;
			margin: auto;
			margin-top: 40rpx;

			.line {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 82rpx;
				background: #F7F8FA;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				margin-bottom: 30rpx;

				.lable {
					font-weight: 400;
					font-size: 28rpx;
					color: #1D2129;
					margin-left: 30rpx;
				}



				input {
					font-size: 28rpx;
					text-align: right;
					margin-right: 30rpx;
				}
			}
		}
	}

	page {
		background: #F7F8FA;
	}

	.fixedbox {
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0rpx -6rpx 14rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		height: 194rpx;
		position: fixed;
		bottom: 0%;

		.btnss1 {
			width: 100%;
			overflow: hidden;
			display: flex;
			justify-content: center;

			.savebtn {
				width: 686rpx;
				height: 82rpx;
				background: #2AB4F5;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				text-align: center;
				line-height: 82rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				margin-top: 32rpx;
			}
		}

		.btnss {
			width: 686rpx;
			margin: auto;
			margin-top: 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.savebtn {
				width: 686rpx;
				height: 82rpx;
				background: #2AB4F5;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				text-align: center;
				line-height: 82rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;

			}

			.btn1 {
				width: 328rpx;
				height: 82rpx;
				background: #F2F3F5;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				text-align: center;
				line-height: 82rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #4E5969;
			}

			.btn2 {
				width: 324rpx;
				height: 82rpx;
				background: #2AB4F5;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				line-height: 82rpx;
				text-align: center;
				font-size: 32rpx;
				text-align: center;
				color: #FFFFFF;
			}
		}

	}

	.tuomingguanli {
		width: 100%;
		position: relative;
		overflow: hidden;

		.tuomingguanliback {
			position: absolute;
			height: 450rpx;
			background: linear-gradient(180deg, #CAEEFF 71%, rgba(240, 250, 255, 0) 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			width: 100%;
			z-index: -1;
		}

		.tuominjihua {
			width: 686rpx;
			overflow: hidden;
			margin: auto;
			margin-top: 28rpx;

			.tuijianbox {
				width: 686rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.03);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				overflow: hidden;
				margin-top: 32rpx;

				.tuijian {
					width: 630rpx;
					margin: auto;

					.shilibox {
						width: 100%;
						overflow: hidden;
						display: flex;
						margin-top: 34rpx;
						align-items: center;

						.itemnd {
							display: flex;
							align-items: center;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #4E5969;
							margin-right: 58rpx;

							.fk {
								width: 28rpx;
								height: 28rpx;
								background: #CAEEFF;
								border-radius: 4rpx 4rpx 4rpx 4rpx;
								margin-right: 12rpx;
							}
						}
					}

					.headerbox {
						width: 100%;
						overflow: hidden;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 30rpx;

						.tighrt {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #86909C;
						}

						.leftbox {
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 32rpx;
							color: #1D2129;

							.xbq {
								width: 34rpx;
								height: 20rpx;
								margin-right: 14rpx;
							}
						}
					}
				}
			}


			.bz {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #86909C;
				display: flex;
				align-items: center;
				margin-top: 28rpx;

				.fuhao {
					width: 25rpx;
					height: 25rpx;
					margin-right: 8rpx;
				}
			}

			.tuominformbox {
				width: 686rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.03);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				overflow: hidden;

				.center {
					width: 630rpx;
					margin: auto;
					padding: 8rpx 0;

					.line {
						width: 100%;
						height: 88rpx;
						border-bottom: 2rpx solid #F2F3F5;
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #1D2129;

						input {
							font-size: 28rpx;
							text-align: right;
						}

						.right {
							display: flex;
							align-items: center;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #86909C;

							.riliicon {
								width: 32rpx;
								height: 30rpx;
								margin-right: 12rpx;
							}

							.arrow {
								width: 24rpx;
								height: 24rpx;
								margin-left: 8rpx;
							}
						}
					}
				}
			}
		}

		.moudleff {
			width: 686rpx;
			// height: 360rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.03);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			overflow: hidden;
			margin: auto;
			margin-top: 32rpx;

			.cc {
				width: 630rpx;
				margin: auto;

				.inputbox {
					width: 100%;
					margin-top: 24rpx;
					margin-bottom: 24rpx;
					background: #F7F8FA;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					// height: 240rpx;
					overflow: hidden;

					.center {
						width: 598rpx;
						margin: 24rpx auto;
						overflow: hidden;

						.textarea {
							width: 100%;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							overflow-y: scroll;
							color: #4E5969;
						}
					}
				}

				.labletitle {
					width: 104rpx;
					display: flex;
					height: 76rpx;
					flex-direction: column;
					align-items: center;
					font-weight: bold;
					line-height: 76rpx;
					font-size: 26rpx;
					color: #2AB4F5;
					position: relative;

					.avtive {
						width: 48rpx;
						height: 4rpx;
						background: #2AB4F5;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						position: absolute;
						bottom: 0%;
					}
				}
			}
		}

		.moudelff {
			width: 686rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.03);
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin: auto;
			margin-top: 20rpx;
			overflow: hidden;

			.cc {
				width: 630rpx;
				margin: auto;

				.line1 {
					width: 100%;
					height: 88rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 2rpx solid #F2F3F5;

					.text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #1D2129;
					}

					.rightinput {
						font-size: 28rpx;
						text-align: right;
					}
				}

				.fuzhendate {
					width: 100%;
					height: 96rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-top: 2rpx solid #F2F3F5;

					.lable {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #1D2129;
					}

					.dateright {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #86909C;
					}
				}

				.line2 {
					width: 100%;
					overflow: hidden;

					.t1 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #1D2129;
						margin-top: 24rpx;
					}

					.xuanxiangboxs {
						width: 100%;
						margin-top: 22rpx;
						overflow: hidden;

						.xuanxa {
							width: 100%;
							display: flex;
							align-items: center;
							margin-bottom: 26rpx;
							justify-content: space-between;

							.xx1 {
								padding: 6rpx;
								border-radius: 0rpx 0rpx 0rpx 0rpx;
								border: 2rpx solid #2AB4F5;
								display: flex;
								justify-content: center;
								align-items: center;
								border-radius: 50%;
								box-sizing: border-box;

								.cnter {
									width: 20rpx;
									height: 20rpx;
									background: #2AB4F5;
									border-radius: 50%;
								}
							}

							.xx {
								width: 32rpx;
								height: 32rpx;
								border-radius: 0rpx 0rpx 0rpx 0rpx;
								border: 2rpx solid #C9CDD4;
								border-radius: 50%;
								box-sizing: border-box;
							}

							.text {
								width: 582rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 26rpx;
								color: #1D2129;
							}
						}
					}
				}

				.line {
					width: 100%;
					height: 96rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 2rpx solid #F2F3F5;

					.text {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #1D2129;
					}

					input {
						text-align: right;
					}

					.right {
						display: flex;
						align-items: center;
						font-size: 28rpx;

						input {
							text-align: right;
						}

					}

					.rightbtn {
						width: 242rpx;
						height: 64rpx;
						background: #E0F5FF;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						text-align: center;
						line-height: 64rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 44rpx;
						color: #2AB4F5;

						.u-count-down__text {
							color: #2AB4F5;
							font-size: 44rpx;
						}
					}
				}
			}
		}

		.tabbox {
			width: 470rpx;
			margin: auto;
			margin-top: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.cc {
				color: #2AB4F5;
			}

			.tabbox1 {
				width: 192rpx;
				height: 84rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				text-align: center;
				line-height: 84rpx;
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;

				.acticvebox {
					width: 48rpx;
					height: 4rpx;
					background: #2AB4F5;
					border-radius: 4rpx 4rpx 4rpx 4rpx;
					bottom: 0%;
					position: absolute;
				}
			}

		}
	}
</style>